<template>
		<view class="order-box">
			<view class="title">
				<view class="text">{{orderInfo.s_address.desc}}</view>
				<view class="icon">
					<image src="../../static/images/order/mobile.png" mode=""></image>
					<image src="../../static/images/order/navigation.png" mode=""></image>
				</view>
			</view>
			<view class="section">
				<u-steps :current="statusMap(orderInfo.status)">
					<u-steps-item title="已下单">
						<view class="slot-icon" slot="icon">
							<image v-if="orderInfo.status==='1'" src="../../static/images/order/ordered.png" style="width: 80rpx; height: 80rpx;"></image>
							<image  v-else src="../../static/images/order/ordered_selected.png" style="width: 80rpx; height: 80rpx;"></image>
						</view>
					</u-steps-item>
					<u-steps-item title="制作中">
						<view class="slot-icon" slot="icon">
							<image v-if="orderInfo.status==='2'" src="../../static/images/order/production_selected.png" style="width: 80rpx; height: 80rpx;"></image>
							<image v-else src="../../static/images/order/production.png" style="width: 80rpx; height: 80rpx;"></image>
						</view>
					</u-steps-item>
					<u-steps-item title="配送中">
						<view class="slot-icon" slot="icon">
							<image v-if="orderInfo.status==='3'" src="../../static/images/order/delivery_selected.png" style="width: 80rpx; height: 80rpx;"></image>
							<image v-else src="../../static/images/order/delivery.png" style="width: 80rpx; height: 80rpx;"></image>
						</view>
					</u-steps-item>
					<u-steps-item title="已送达">
						<view class="slot-icon" slot="icon">
							<image v-if="orderInfo.status==='6'" src="../../static/images/order/delivered_selected.png" style="width: 80rpx; height: 80rpx;"></image>
							<image v-else src="../../static/images/order/delivered.png" style="width: 80rpx; height: 80rpx;"></image>
						</view>
					</u-steps-item>
					<u-steps-item title="请取餐" v-if="false">
						<view class="slot-icon" slot="icon">
							<image v-if="orderInfo.status==='6'" src="../../static/images/order/delivered.png" style="width: 80rpx; height: 80rpx;"></image>
							<image v-else src="../../static/images/order/delivered.png" style="width: 80rpx; height: 80rpx;"></image>
						</view>
					</u-steps-item>
				</u-steps>
				<view class="wait">
					<!-- 您前面还有<text class="text-color">{{4}}</text>单待制作 -->
				</view>
				<view class="order-shop">
					<view class="grid" v-for="order in orderInfo.goods_info" :key="order.id">
						<view class="left">
							<view class="order-img">							
								<image :src="order.s_goods_photos[0].path" mode=""></image>
							</view>
							<view class="order-name">
								<text class="shop-name">{{order.goods_name}}</text>
								<text class="shop-desc">1111111</text>
							</view>
						</view>
						<view class="right">
							<text class="num">x{{order.num}}</text>
							<text class="price">￥{{order.price}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="modepayment">
				<view class="pay-cell">
					<text class="title-pay">支付方式</text>
					<text class="balance">余额支付</text>
				</view>
				<view class="pay-cell">
					<text class="title-pay">金额总计</text>
					<text class="balance">￥{{this.orderInfo.total_price}}</text>
				</view>
			</view>
			<view class="modepayment">
				<view class="pay-cell">
					<text class="title-pay">下单时间</text>
					<text class="balance">{{this.orderInfo.createdAt}}</text>
				</view>
				<view class="pay-cell">
					<text class="title-pay">下单门店</text>
					<text class="balance">福永同泰时代城店</text>
				</view>
				<view class="pay-cell">
					<text class="title-pay">订单号</text>
					<text class="balance">{{this.orderInfo.order_id}}</text>
				</view>
			</view>
			<view class="modepayment">
				<view class="pay-cell">
					<text class="title-pay">取单号</text>
					<text class="balance">{{this.orderInfo.id}}</text>
				</view>
				<view class="pay-cell">
					<text class="title-pay">享用方式</text>
					<text class="balance">外卖</text>
				</view>
				<view class="pay-cell">
					<text class="title-pay">取餐时间</text>
					<text class="balance">立即取餐</text>
				</view>
				<view class="pay-cell">
					<text class="title-pay">完成制作时间</text>
					<text class="balance">22398399034</text>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo:{}
			};
		},
		onLoad() {
			this.orderInfo=uni.getStorageSync('orderInfo')
			// console.log(this.orderInfo);
		},
		methods:{
			// 状态映射
			statusMap(status){
			  if(status==='0'||status==='7'){
			    return 0
			  }else if(status==='1'){
			    return 0
			  }else if(status==='2'){
			    return 1
			  }else if(status==='3'){
			    return 2
			  }else if(status==='6'){
			    return 3
			  }
			},
		}
	}
</script>

<style lang="scss">
.order-box{
		margin: 0 auto;
		width: 710rpx;
		background-color: #f1f8fa;
		.title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			height: 112rpx;
			background-color: #fff;			
			box-sizing: border-box;
			.text{
				color: #5A5B5C;
				font-size: 32rpx;
			}
			.icon{
				display: flex;
				justify-content: space-between;
				align-items: center;
				image{
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
		.section{
			padding: 50rpx 30rpx;
			// height: 758rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			.u-steps{
				align-items: center;
				width: 650rpx;
				height: 218rpx;
			}
			.wait{
				margin-bottom: 50rpx;
				text-align: center;
				 color: #919293;
				 font-size: 28rpx;
				 .text-color{
					 color: #ADB838;
				 }
			}
			.order-shop{
				.grid{
					margin-bottom: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 650rpx;
					height: 82rpx;
					.left{
						display: flex;
						// flex-direction: column;
						justify-content: space-between;
						.order-img{
							image{
								width: 80rpx;
								height: 80rpx;
							}
						}
						.order-name{
							margin-left: 10rpx;
							display: flex;
							flex-direction: column;
							.shop-desc{
								margin-top: 8rpx;
								color: #919293;
								font-size: 24rpx;
								    overflow: hidden;
								    text-overflow: ellipsis;
								    white-space: nowrap;
							}
						}
					}
					.right{
						display: flex;
						justify-content: space-between;
						width: 260rpx;
						height: 40rpx;
						.num{
							color: #5A5B5C;
							font-size: 28rpx;
						}
						.price{
							color: #5A5B5C;
							font-size: 28rpx;
							font-weight: 700;
						}
					}
				}
				.grid:last-child{
					margin-bottom: 0;
				}
			}
		}
		.modepayment{
			padding: 50rpx 30rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			background-color: #fff;
			.pay-cell{
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				.title-pay{
					font-size: 28rpx;
					color: #5A5B5C;
				}
				.balance{
					font-size: 28rpx;
					color: #5A5B5C;
					font-weight: 700;
				}
			}
			.pay-cell:last-child{
				margin-bottom: 0;
			}
		}
	}
</style>
